Menu Frequently Asked Questions
This document covers most of frequently asked questions regarding COOLjsMenu and COOLjsMenu Professional scripts. If you think we are missing something, please write your suggestions to the following address: jsinfo@cooldev.com. Spelling and grammar tips are also greatly welcome.
Contents
Questions and answers
1. How a to add your menu to my page?
Step 1. Go to online builder and try to generate menu structure. Builder's output will be similar to the following:
var CM_STYLE = {border:1, shadow:2, color:{border:"black", shadow:"gray", bgON:"silver",bgOVER:"navy"}, css:{ON:"clsCMOn", OVER:"clsCMOver"}};
var MENU_ITEMS = [
{pos:[5,5], size:[25,100], itemoff:[0,99], leveloff:[24,0], delay:600, style:CM_STYLE},
{code:"1", url:"1"},
{code:"2", url:"2",
sub:[
{size:[25,100], itemoff:[24,0], leveloff:[24,0], style:CM_STYLE},
{code:"3", url:"3"}
]
}
];
Actually, this code was produced in several mouse clicks and keys '1', '2',and '3', and then first line with BLANK_IMAGE definition was added (this definition needed because we are creating menu from scratch).
Step 2. Paste this code into newly created .js file ("menuitems.js" is a good name for it).
Step 3. Put menuitems.js and coolmenu.js (or coolmenupro.js if you are using Professional version) into some folder, probably into the same folder where your HTML code is. Then link these files into your HTML code:
<script type="text/javascript" src="menuitems.js"></script>
Step 4. Add initialization code to your HTML just before </BODY>.
Standard edition:
var menu = new COOLjsMenu("MainMenu", MENU_ITEMS);
</script>
</body>
Professional edition:
var menu = new COOLjsMenuPRO("MainMenu", MENU_ITEMS);
menu.initTop();
menu.init();
</script>
</body>
Step 5. You'll probably want to create/adjust CSS definitions of classes clsCMOn and clsCMOver.
2. Differences between Standard and Professional.
Professional version includes all basic features of Standard edition, and also introduces some new ones. On COOLjsMenu's page you can see comparison of these two editions. These galleries will show you most of the features our menus have: Standard, Professional.
3. Applying Internet Explorer filters.
You can read about this here: "IE filters" demo and "IE transitions" demo
4. Download size calculations.
Script itself is about 25Kb. Average menuitems.js is 2Kb. Additional initialization code and CSS style specification usually does not exceed 0.5Kb. Thus, full download size for the menu is 27.5Kb - up to 5 seconds on slow connection (56K modem) for the very first page visit. Consequent visits will not cause scripts to be reloaded from the server, and page will load even faster.
5. Dynamic menu resize when user resizes window.
Most common way to make menu fit window is spanning whole menu across the window. This can be done by splitting menu into several smaller menus (one top level item must be transformed into a separate menu) and putting these menus into cell of the table which has "width" attribute set to "100%". Other methods are possible, but they are so uncommon that it is better to talk about them individually, so please contact technical support and ask for assistance.
6. Multiple menus on a single page.
There is no problems in having several menus on a single page. More info can be found here: "Multiple menus" demo.
7. Centering menu on the screen.
This can be done only with the Professional version: go to menuitems.js and change "pos" field to "relative". Then pur your menu initialization code into some table with "align" attribute set to "center":
<script type="text/javascript">
var menu = new COOLjsMenuPRO('myMenu', MENU_ITEMS);
menu.initTop();
</script>
</td></tr></table>
...
<script type="text/javascript">
menu.init();
menu.draw();
</script>
</body>
</html>
Instead of table you can use <CENTER> tag or one of table cells with "align" attribute set to "center". Also using same technique you can align menu left or right.
Note: there are many samples in the package that demonstrate this technique.
8. Opening new window on item click.
Simpliest way to do this is to add "_blank" target to your items:
This way of popup window creation does not allow you to tune window size, scrollbars, and other features. You can gain more control over creation process by using "window.open()" method:
9. Text wrapping for long item captions.
You have to specify autosizing for item in vertical direction only:
Or, the same for the whole level:
{size:[ "+self", 200 ], ...
...
There is a sample in the package that demostrates how to achive this effect: "Ready to use/Autosize and autowrap".
10. How to add a separator to my menu?
Separator is a menu item without "code" and "url" fields:
{code:"SubItem 2"},
{},
{code:"SubItem 3"},
{code:"SubItem 4"}
You can define special substile for it:
size:[ 22, 100 ],
itemoff:[ 21, 0 ],
...,
ifSeparator:{
size:[ 6, 100 ],
itemoff:[ 5, 0 ],
}
];
11. How can I display a menu when the mouse is over a hyperlink?
Professional version can do this for you. More info can be found here: "Popups" demo.
12. Form elements appear on top of the menu!
Our menu is a DHTML object - some layers, some images glued together. And form elements like comboboxs are ActiveX controls. Flash animations and Java applets also implemented as ActiveX controls. These things cannot be mixed with DHTML layers, and ActiveX controls are always in front of DHTML objects. One of the ways of avoiding this odd behaviour is to hide combos and similar objects when menu sublevels are about to show. But this unlikely to be needed because the menu tries to handle this situation automatically.
More info can be found here: "Z-index" demo.
13. How can I use menu across frames?
First of all, menu cannot cross frame boundaries because all browsers do not allow to do this. Partially this problem can be solved by placing top level items into "navigation" frame, and all submenus - into "contents" frame. To get this idea clear you can visit our demo page with explanations. This method works only with COOLjsMenu Professional.
If you want to open pages into some frame other than one containing the menu, you can use "target" field:
This feature presents in both Standard and Professional.
14. I am trying to tune styles for my menu, but I'm constantly getting green background.
Chances that you are using one of our samples as starting point, and your menu is outdated. Upgrade will help you. But if you cannot upgrade for some reason, please follow these instructions.
Check your style definition and set all color definitions to some value even if you don't actually need to. Here is sample style definition with all colors defined:
var css = {ON:"clsCMTopOn", OVER:"clsCMTopOver"};
var STYLE = {border:1, borders:[1,1,1,0], shadow:2, color:color, css:css};
15. I'm getting little red cross on top of every menu item!
This happens because browser cannot find required blank image - it must somewhere in the directory structure of your site in order to get menu working without these red crosses. To resolve this issue, put b.gif to some folder (e.g. 'img'). Then insert into the menuitems.js file the following line:
{..., blankImage:"img/b.gif", ...},
...
For older version use global BLANK_IMAGE variable:
This line must be inserted at the top of the file, and path in the double quotes must point to b.gif no matter where you've put it.
16. I've removed all border definitions, but still having one pixel border!
This can happen because of missing blank image. Please read the previous question to find out how this can be fixed. Also, your CSS code can contain some border definitions, so it can be good idea to check your CSS files and/or STYLE tags.
17. Every item in my menu has broken image which covers whole item!
Again, this case is covered in two previous questions.
 |
|
